<template>
  <div id="total1">
    <Nav/>
    <div id="navindex">
      
      <div id="left">
        <div>
          <el-tabs type="border-card" style="width:770px;font-size:20px;position:relative;top:0px">
            <el-tab-pane label="推荐" >
               <ul v-for="(item,index) in articleContent" :key="item.aId"  ref="dom" @mouseover="changeColor(index)"  @mouseout="changeColors(index)">
                <li>
                  <div style="width:60px;height:250px;float:left;">
                    <el-progress type="circle" :percentage="item.likeClick" style="margin-top:30px"></el-progress>
                    <ul>
                      <li class="buttons">
                        <el-tag type="success" style="width:45px">{{item.label}}</el-tag>
                      </li>
                      <li class="buttons">
                        <el-tag type="success" style="width:45px;"><span style="text-align:center;position:relative;left:-4px">独家推荐</span></el-tag>
                      </li>
                      
                    </ul>
                  </div>
                  <div style="width:720px; height:250px; padding-top:15px;">
                     
                    <div style="margin-left:70px;overflow:hidden;text-overflow: ellipsis;width:650px;height:31px; white-space: nowrap;" @click="toDetails(item.aId)" class="fontt">
                      {{item.title}}
                      </div>
                    <div
                      style="width:250px;height:150px;margin-left:10px;float:left;margin-top:5px"
                    >
                      <img
                        style="width:250px;height:150px; border-radius:5px;margin-top:5px"
                        :src="`http://localhost:3000/upload/${item.aImg}`"
                        alt
                      />
                    </div>
                    <div
                      class="innerContent"
                    >{{item.content}}</div>
                    <div
                      style="width:600px;height:50px;margin-left:10px;margin-top:10px; float:left"
                    >
                      <ul>
                        <li>
                          <img class="personImg" :src="`http://localhost:3000/upload/${item.headImg}`" alt />
                          <span class="personName" style="width:60px;height:25px;white-space:nowrap;position:relative;top:19px" >{{item.nickName}}</span>
                          <span class="personName" style="position:relative;left:20px;top:16px">{{item.pTime | time}}</span>
                          <i class="el-icon-view icons" style="margin-left:50px;position:relative;top:10px"></i>
                          <span class="personShow">
                            <i>{{item.response+100}}</i>人浏览
                          </span>
                          <i class="el-icon-chat-dot-round icons" style="position:relative;top:10px"></i>
                          <span class="personShow">
                            <i>{{item.response}}</i>人回复
                          </span>
                          <i class="el-icon-thumb icons" style="position:relative;top:10px"></i>
                          <span class="personShow">
                            <i>{{item.likeClick}}</i>人点赞
                          </span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
                 <el-divider></el-divider>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="关注">
              <ul v-for="(item,index) in concernContent" :key="item.aId"  ref="dom" @mouseover="changeColor(index)"  @mouseout="changeColors(index)">
                <li>
                  <div style="width:60px;height:250px;float:left;">
                    <el-progress type="circle" :percentage="item.likeClick" style="margin-top:30px"></el-progress>
                    <ul>
                      <li class="buttons">
                        <el-tag type="success" style="width:45px">{{item.label}}</el-tag>
                      </li>
                      <li class="buttons">
                        <el-tag type="success" style="width:45px;"><span style="text-align:center;position:relative;left:-4px">关注</span></el-tag>
                      </li>
                      
                    </ul>
                  </div>
                  <div style="width:720px; height:250px; padding-top:15px;">
                     
                    <div style="margin-left:70px;overflow:hidden;text-overflow: ellipsis;width:650px;height:31px; white-space: nowrap;" @click="toDetails(item.aId)" class="fontt">
                      {{item.title}}
                      </div>
                    <div
                      style="width:250px;height:150px;margin-left:10px;float:left;margin-top:5px"
                    >
                      <img
                        style="width:250px;height:150px; border-radius:5px;margin-top:5px"
                        :src="`http://localhost:3000/upload/${item.aImg}`"
                        alt
                      />
                    </div>
                    <div
                      class="innerContent"
                    >{{item.content}}</div>
                    <div
                      style="width:600px;height:50px;margin-left:10px;margin-top:10px; float:left">
                      <ul>
                        <li>
                          <img class="personImg" :src="`http://localhost:3000/upload/${item.headImg}`" alt />
                          <span class="personName" style="width:60px;height:25px;white-space:nowrap;position:relative;top:20px" >{{item.nickName}}</span>
                          <span class="personName" style="position:relative;left:20px;position:relative;top:16px">{{item.pTime | time}}</span>
                          <i class="el-icon-view icons" style="margin-left:70px;position:relative;top:10px" ></i>
                          <span class="personShow">
                            <i>{{item.response+100}}</i>人浏览
                          </span>
                          <i class="el-icon-chat-dot-round icons" style="position:relative;top:10px"></i>
                          <span class="personShow">
                            <i>{{item.response}}</i>人回复
                          </span>
                          <i class="el-icon-thumb icons" style="position:relative;top:10px"></i>
                          <span class="personShow">
                            <i>{{item.likeClick}}</i>人点赞
                          </span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
                 <el-divider></el-divider>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="收藏">
              <ul v-for="(item,index) in collectContent" :key="item.aId"  ref="dom" @mouseover="changeColor(index)"  @mouseout="changeColors(index)">
                <li>
                  <div style="width:60px;height:250px;float:left;">
                    <el-progress type="circle" :percentage="item.likeClick" style="margin-top:30px"></el-progress>
                    <ul>
                      <li class="buttons">
                        <el-tag type="success" style="width:45px">{{item.label}}</el-tag>
                      </li>
                      <li class="buttons">
                        <el-tag type="success" style="width:45px;"><span style="text-align:center;position:relative;left:-4px">关注</span></el-tag>
                      </li>
                      
                    </ul>
                  </div>
                  <div style="width:720px; height:250px; padding-top:15px;">
                     
                    <div style="margin-left:70px;overflow:hidden;text-overflow: ellipsis;width:650px;height:31px; white-space: nowrap;" @click="toDetails(item.aId)" class="fontt">
                      {{item.title}}
                      </div>
                    <div
                      style="width:250px;height:150px;margin-left:10px;float:left;margin-top:5px"
                    >
                      <img
                        style="width:250px;height:150px; border-radius:5px;margin-top:5px"
                        :src="`http://localhost:3000/upload/${item.aImg}`"
                        alt
                      />
                    </div>
                    <div
                      class="innerContent"
                    >{{item.content}}</div>
                    <div
                      style="width:600px;height:50px;margin-left:10px;margin-top:10px; float:left">
                      <ul>
                        <li>
                          <img class="personImg" :src="`http://localhost:3000/upload/${item.headImg}`" alt />
                          <span class="personName" style="width:60px;height:25px;white-space:nowrap;position:relative;top:18px" >{{item.nickName}}</span>
                          <span class="personName" style="position:relative;left:20px;position:relative;top:15px">{{item.pTime | time}}</span>
                          <i class="el-icon-view icons" style="margin-left:70px;position:relative;top:10px" ></i>
                          <span class="personShow">
                            <i>{{item.response+100}}</i>人浏览
                          </span>
                          <i class="el-icon-chat-dot-round icons" style="position:relative;top:10px"></i>
                          <span class="personShow">
                            <i>{{item.response}}</i>人回复
                          </span>
                          <i class="el-icon-thumb icons" style="position:relative;top:10px"></i>
                          <span class="personShow">
                            <i>{{item.likeClick}}</i>人点赞
                          </span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
                 <el-divider></el-divider>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <div id="right" style="background-color: white;">
        <div style="width:330px;height:200px;overflow-hidden">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in slidePicture" :key="item">
              <img style="width:330px;height:200px;" :src="item" alt />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="rightTitle">
          <ul style="margin: 0px;">
            <li class="rightLi">
              <img class="rightImage" :src="imagePath7" />
              <p>答问题</p>
            </li>
            <li class="rightLi" @click="goWrite">
              <img class="rightImage" :src="imagePath6" />
              <p>写文章</p>
            </li>
            <li class="rightLi">
              <img class="rightImage" :src="imagePath5" />
              <p>发视频</p>
            </li>
            <li class="rightLi">
              <img class="rightImage" :src="imagePath9" />
              <p>写想法</p>
            </li>
          </ul>
        </div>
        <div class="rightUse">
          <ul style="margin: 0px;">
            <li class="rightUseLi" onclick="afterAnswer()">稍后答</li>
            <li class="rightUseLi">草稿箱</li>
          </ul>
        </div>

        <div class="creation">
          <svg
            t="1597729926392"
            class="icon"
            style=" position:relative;top: -6px;left:2px"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10546"
            width="30"
            height="30"
          >
            <path
              d="M896 864a32 32 0 0 1 0 64H128a32 32 0 0 1 0-64z m-60.16-733.621l15.093 15.093c45.867 45.835 45.867 120.16 0 166.005L418.795 743.34a160.192 160.192 0 0 1-78.123 42.986l-152.245 34.198c-23.84 5.365-44.662-16.854-37.75-40.288l43.339-146.88a160.043 160.043 0 0 1 40.373-67.926l435.328-435.05c45.867-45.835 120.246-45.835 166.112 0zM636.32 254.304L279.68 610.709a96.021 96.021 0 0 0-24.213 40.747l-27.947 94.656 99.093-22.261a96.117 96.117 0 0 0 46.87-25.782l353.45-353.226-90.602-90.539z m78.699-78.656l-33.398 33.387 90.603 90.538 33.387-33.376a53.333 53.333 0 0 0 0-75.456l-15.094-15.093a53.408 53.408 0 0 0-75.498 0z"
              p-id="10547"
            />
          </svg>
          <span style="margin-top: -4px;">创作中心</span>
          <span class="creations">去开通>></span>
        </div>

        <div class="extension">
          <ul style="margin: 0px;">
            <li class="extensionLi">
              <svg
                t="1597730611916"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="13567"
                width="30"
                height="30"
              >
                <path
                  d="M754.4 490.2l-194.7-40.4 83.2-283.1-373.3 367.1 194.7 40.4-83.2 283.1 373.3-367.1z"
                  fill="#FFD81A"
                  p-id="13568"
                />
              </svg>
              <p>Live</p>
            </li>
            <li class="extensionLi" onclick="goBookshop()">
              <svg
                t="1597730662989"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="15427"
                width="30"
                height="30"
              >
                <path
                  d="M32 347.2h204.8v614.4H32zM32 80h204.8v235.2H32z"
                  fill="#9DE8F7"
                  p-id="15428"
                />
                <path
                  d="M0 48v944h268.8V48H0z m32 913.6V347.2h204.8v614.4H32z m204.8-646.4H32V80h204.8v235.2z"
                  fill="#1A1718"
                  p-id="15429"
                />
                <path
                  d="M368 347.2h204.8v614.4H368zM368 80h204.8v235.2H368z"
                  fill="#FAD97F"
                  p-id="15430"
                />
                <path
                  d="M336 48v944h268.8V48H336z m32 913.6V347.2h204.8v614.4H368z m204.8-646.4H368V80h204.8v235.2z"
                  fill="#1A1718"
                  p-id="15431"
                />
                <path
                  d="M931.2 297.6L910.4 64l-203.2 19.2 20.8 232zM988.8 940.8l-54.4-611.2-203.2 17.6L785.6 960z"
                  fill="#F2385A"
                  p-id="15432"
                />
                <path
                  d="M939.2 30.4L672 52.8l84.8 940.8L1024 971.2 939.2 30.4zM910.4 64l20.8 233.6-203.2 17.6-20.8-232L910.4 64z m24 265.6l54.4 611.2-203.2 19.2-54.4-612.8 203.2-17.6z"
                  fill="#1A1718"
                  p-id="15433"
                />
              </svg>
              <p>书店</p>
            </li>
            <li class="extensionLi" onclick="goRoundTable()">
              <svg
                t="1597730753195"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="20265"
                width="30"
                height="30"
              >
                <path
                  d="M341.33312 29.141528v965.71673C142.463911 924.586302 0 734.933087 0 511.999893 0 289.066699 142.463911 99.413485 341.33312 29.141528z"
                  fill="#000000"
                  p-id="20266"
                />
                <path
                  d="M682.66624 29.141528v965.71673A511.167681 511.167681 0 0 1 511.99968 1023.999573c-59.839963 0-117.290593-10.261327-170.66656-29.141315V29.141528A511.167681 511.167681 0 0 1 511.99968 0.000213c59.839963 0 117.290593 10.261327 170.66656 29.141315z"
                  fill="#E94B35"
                  p-id="20267"
                />
                <path
                  d="M682.66624 994.858258V29.141528C881.535449 99.413485 1023.99936 289.066699 1023.99936 511.999893c0 222.933194-142.463911 412.586409-341.33312 482.858365z"
                  fill="#1FCE6D"
                  p-id="20268"
                />
                <path
                  d="M340.266454 336.789336A244.650514 244.650514 0 0 0 266.6665 511.999893c0 135.487915 109.845265 245.33318 245.33318 245.33318S757.33286 647.487809 757.33286 511.999893c0-66.773292-26.85865-129.386586-73.599954-175.210557a31.99998 31.99998 0 0 0-44.799972 45.717305A180.650554 180.650554 0 0 1 693.3329 511.999893a181.33322 181.33322 0 1 1-362.66644 0c0-49.407969 19.818654-95.573274 54.399966-129.493252a31.99998 31.99998 0 0 0-44.799972-45.717305z"
                  fill="#FFFFFF"
                  p-id="20269"
                />
                <path
                  d="M383.99976 501.333233a159.9999 127.99992 90 1 0 255.99984 0 159.9999 127.99992 90 1 0-255.99984 0Z"
                  fill="#FFFFFF"
                  p-id="20270"
                />
              </svg>
              <p>圆桌</p>
            </li>
          </ul>
          <ul style="margin: 0px;">
            <li class="extensionLi" onclick="goColum()">
              <svg
                t="1597730797271"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="20488"
                width="30"
                height="30"
              >
                <path
                  d="M896 170.7H128c-23.6 0-42.7 19.1-42.7 42.7v597.3c0 23.6 19.1 42.7 42.7 42.7h768c23.6 0 42.7-19.1 42.7-42.7V213.3c0-23.5-19.1-42.6-42.7-42.6zM633.5 534.3l-89 89c-8.7 8.7-20.2 13.5-32.5 13.5s-23.8-4.8-32.5-13.5l-89-89c-16.4-16.3-25.4-38-25.5-61.2 0-23.2 9-45 25.4-61.4s38.2-25.4 61.3-25.4c22.7 0 44.1 8.7 60.3 24.5 16.3-15.8 37.7-24.5 60.4-24.5 23.2 0 44.9 9 61.3 25.5 16.4 16.4 25.4 38.2 25.4 61.4-0.1 23-9.2 44.8-25.6 61.1z"
                  fill="#009F72"
                  p-id="20489"
                />
                <path
                  d="M810.7 768H213.3c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h597.3c23.6 0 42.7 19.1 42.7 42.7S834.2 768 810.7 768zM421.5 442.8c16.7-16.7 43.7-16.7 60.3 0l28.8 28.8c0.8 0.8 2.1 0.8 2.8 0l28.8-28.8c16.7-16.7 43.7-16.7 60.3 0 16.7 16.7 16.7 43.7 0 60.3l-89.1 89.1c-0.8 0.8-2 0.8-2.8 0l-89.1-89.1c-16.7-16.6-16.7-43.6 0-60.3zM810.7 341.3H213.3c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h597.3c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.6 42.7z"
                  fill="#F9DB88"
                  p-id="20490"
                />
              </svg>
              <p>专栏</p>
            </li>
            <li class="extensionLi">
              <svg
                t="1597730839644"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="20827"
                width="30"
                height="30"
              >
                <path
                  d="M820.369 190.613c-81.549-81.504-189.983-126.39-305.331-126.39-115.331 0-223.772 44.96-305.346 126.6-81.553 81.618-126.466 190.095-126.466 305.446 0 59.39 11.841 116.948 35.194 171.074 22.56 52.289 54.774 98.985 95.746 138.791 0.508 0.494 0.843 0.82 0.851 2.833 0.065 17.9-26.524 52.482-44.491 70.197a28.765 28.765 0 0 0 20.148 49.296h285.474c15.886 0 28.766-12.878 28.766-28.766s-12.879-28.766-28.766-28.766H250.812c11.948-18.946 21.788-40.976 21.735-62.092-0.043-17.179-6.368-32.382-18.292-43.967-73.191-71.108-113.498-166.5-113.498-268.602 0-206.508 167.901-374.514 374.281-374.514 206.378 0 374.28 167.83 374.28 374.121 0 51.987-9.659 101.168-28.707 146.176-6.193 14.63 0.649 31.51 15.279 37.702 14.633 6.194 31.51-0.65 37.701-15.28 22.069-52.141 33.257-108.866 33.257-168.599 0.002-115.332-44.917-223.743-126.479-305.26z"
                  fill="#E75934"
                  p-id="20828"
                />
                <path
                  d="M364.579 478.864m-66.887 0a66.887 66.887 0 1 0 133.774 0 66.887 66.887 0 1 0-133.774 0Z"
                  fill="#E75934"
                  p-id="20829"
                />
                <path
                  d="M675.248 478.864m-66.887 0a66.887 66.887 0 1 0 133.774 0 66.887 66.887 0 1 0-133.774 0Z"
                  fill="#E75934"
                  p-id="20830"
                />
                <path
                  d="M806.952 817.713c15.887 0 28.766-12.879 28.766-28.766 0-15.887-12.879-28.766-28.766-28.766h-74.625l59.411-69.094c10.357-12.046 8.989-30.208-3.058-40.565-12.041-10.357-30.205-8.991-40.565 3.056l-58.753 68.329-56.632-67.985c-10.169-12.206-28.306-13.86-40.513-3.69-12.207 10.168-13.859 28.306-3.691 40.513l57.842 69.437h-73.854c-15.887 0-28.766 12.879-28.766 28.766 0 15.887 12.879 28.766 28.766 28.766h87.735v25.889h-87.735c-15.887 0-28.766 12.879-28.766 28.766 0 15.887 12.879 28.766 28.766 28.766h87.735v28.766c0 15.887 12.878 28.766 28.766 28.766s28.766-12.878 28.766-28.766v-28.766h89.173c15.887 0 28.766-12.879 28.766-28.766 0-15.887-12.879-28.766-28.766-28.766h-89.173v-25.889h89.171z"
                  fill="#E75934"
                  p-id="20831"
                />
              </svg>
              <p>付费咨询</p>
            </li>
            <li class="extensionLi" onclick="goyclopedia()">
              <svg
                t="1597730940354"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="23355"
                width="30"
                height="30"
              >
                <path
                  d="M90.352941 837.270588v-722.823529l210.82353 48.188235V69.270588L0 0v903.529412l301.176471 93.364706v-96.376471z"
                  fill="#A3CCFA"
                  p-id="23356"
                />
                <path
                  d="M632.470588 111.435294V18.070588l-283.105882 63.247059-48.188235-12.047059v927.62353l54.211764 15.058823 36.141177-6.023529 240.941176-54.211765v-90.352941l-240.941176 51.2V162.635294z"
                  fill="#5490D6"
                  p-id="23357"
                />
                <path
                  d="M674.635294 9.035294L632.470588 18.070588v933.647059l42.164706-9.035294L1024 1024V90.352941L674.635294 9.035294zM933.647059 909.552941l-210.82353-48.188235V114.447059l210.82353 48.188235v746.917647z"
                  fill="#A3CCFA"
                  p-id="23358"
                />
              </svg>
              <p>百科</p>
            </li>
          </ul>
        </div>
        <div class="advice">
          <img
            style="width: 330px; height: 330px;"
            src="https://pic1.zhimg.com/v2-1e950f2d301ca6e27ca46ee86d477bc4_540x450.jpeg"
            id="loopPic"
            alt
          />
        </div>
        <div class="collect">
          <ul style="margin:0px">
            <li class="collectLi">
              <svg
                t="1597731726736"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="24104"
                width="20"
                height="20"
              >
                <path
                  d="M979.2 371.2l-243.2 0c-51.2 0-102.4-32-115.2-83.2L544 57.6c-12.8-32-51.2-32-64 0L403.2 288c-19.2 51.2-64 83.2-115.2 83.2L44.8 371.2C12.8 371.2 0 416 25.6 435.2L224 576c44.8 32 64 89.6 44.8 134.4L192 947.2c-12.8 32 25.6 57.6 51.2 38.4l198.4-140.8c44.8-32 102.4-32 147.2 0l198.4 140.8c25.6 19.2 64-6.4 51.2-38.4l-76.8-230.4c-19.2-51.2 0-108.8 44.8-134.4l198.4-140.8C1024 416 1011.2 371.2 979.2 371.2zM704 460.8c-179.2 0-204.8-262.4-204.8-262.4C499.2 192 499.2 185.6 512 179.2c6.4 0 12.8 6.4 19.2 12.8 0 0 19.2 236.8 172.8 236.8 6.4 0 12.8 6.4 12.8 12.8C716.8 454.4 710.4 460.8 704 460.8z"
                  p-id="24105"
                />
              </svg>
              <span class="collectSpan">我的收藏</span>
            </li>
            <li class="collectLi">
              <svg
                t="1597731771029"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="24859"
                width="20"
                height="20"
              >
                <path
                  d="M511.35488 131.9936s238.19264-198.7584 450.56 40.96c0 0 140.17536 152.33024-10.24 378.88l-409.6 409.6s-22.20032 33.792-61.44 0l-430.08-430.08s-107.04896-188.5184 0-348.16c0 0 182.85568-267.70432 460.8-51.2z"
                  p-id="24860"
                />
                <path
                  d="M132.47488 387.9936a18.72896 18.72896 0 0 0 20.48-20.48s-6.33856-164.63872 163.84-163.84c0 0 20.48-4.32128 20.48-20.48s-20.48-20.48-20.48-20.48-204.46208-8.81664-204.8 204.8c0 0 2.95936 20.48 20.48 20.48z"
                  fill="#EBBA50"
                  p-id="24861"
                />
              </svg>
              <span class="collectSpan">我关注的问题</span>
            </li>
            <li class="collectLi">
              <svg
                t="1597731804278"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="25693"
                width="20"
                height="20"
              >
                <path
                  d="M724.89984 602.65472c12.04224 9.56928 31.30368 4.7872 40.9344-9.5744 4.8128-7.18336 4.8128-14.3616 4.8128-21.53984-2.41152-7.17824-7.22432-14.3616-12.04224-19.14368-16.85504-9.5744-33.71008-21.53984-52.97152-28.71808 24.07936-23.936 43.3408-50.25792 55.37792-81.37728 14.4384-33.50016 21.67296-69.4016 21.67296-107.69408 0-148.3776-120.3968-268.04736-269.68576-268.04736S245.71904 188.61568 245.71904 336.99328c0 71.79776 28.89728 138.81344 79.4624 189.07648-156.50816 71.79264-257.6384 227.35872-257.6384 399.67744 0 16.75264 12.03712 28.71808 28.89216 28.71808s28.89216-11.96544 28.89216-28.71808c0-160.34816 101.12512-303.94368 250.4192-358.9888 84.28032 50.24768 192.63488 47.86688 274.49856 0 26.496 9.56416 52.98688 21.53472 74.65472 35.89632z m-211.8912-57.44128c-115.57888 0-209.48992-93.34272-209.48992-208.22016 0-114.87232 93.90592-208.20992 209.48992-208.20992 115.584 0 209.48992 93.3376 209.48992 208.20992 0 28.71808-4.8128 57.4464-16.85504 83.7632-9.63072 23.936-26.49088 45.47584-45.75744 64.61952-38.51776 38.2976-91.49952 59.83744-146.87744 59.83744z m411.71968 221.95712h-95.1296v-95.13472a31.70816 31.70816 0 1 0-63.41632 0v95.13472h-95.13472a31.70816 31.70816 0 0 0 0 63.42144h95.13472v95.1296a31.71328 31.71328 0 1 0 63.41632 0v-95.1296h95.1296a31.70816 31.70816 0 1 0 0-63.42144z"
                  fill="#333333"
                  p-id="25694"
                />
              </svg>
              <span class="collectSpan">我的邀请</span>
            </li>
            <li class="collectLi">
              <svg
                t="1597731844553"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="27921"
                width="20"
                height="20"
              >
                <path
                  d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0zM361.6 220.8c38.4-32 121.6 35.2 150.4 32 28.8 3.2 112-64 150.4-32 38.4 32-44.8 102.4-44.8 102.4h-208c-3.2 0-86.4-70.4-48-102.4zM624 361.6c0 9.6-9.6 19.2-19.2 19.2H416c-9.6 0-19.2-9.6-19.2-19.2s9.6-19.2 19.2-19.2h188.8c9.6 0 19.2 9.6 19.2 19.2z m-112 448c-144 0-262.4 12.8-262.4-108.8 0-89.6 64-233.6 156.8-300.8h208c92.8 67.2 156.8 211.2 156.8 300.8C774.4 822.4 656 809.6 512 809.6z m0 0"
                  p-id="27922"
                />
                <path
                  d="M614.4 483.2c6.4-6.4 6.4-12.8 0-16-3.2-3.2-12.8-3.2-16 0L512 553.6l-86.4-86.4c-6.4-6.4-12.8-6.4-16 0-3.2 3.2-3.2 12.8 0 16l92.8 92.8v6.4H416c-6.4 0-12.8 6.4-12.8 12.8S409.6 608 416 608h83.2v48H416c-6.4 0-12.8 6.4-12.8 12.8s6.4 12.8 12.8 12.8h83.2v60.8c0 6.4 6.4 12.8 12.8 12.8s12.8-6.4 12.8-12.8v-60.8H608c6.4 0 12.8-6.4 12.8-12.8S614.4 656 608 656h-83.2v-48H608c6.4 0 12.8-6.4 12.8-12.8s-6.4-12.8-12.8-12.8h-83.2V576l89.6-92.8z m0 0"
                  p-id="27923"
                />
              </svg>
              <span class="collectSpan">我的余额</span>
            </li>
            <li class="collectLi">
              <svg
                t="1597731875872"
                class="icon"
                viewBox="0 0 1467 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="28703"
                width="20"
                height="20"
              >
                <path
                  d="M281.681038 833.589084l-83.849553 105.251831c-32.0442 40.19906 7.122813 97.232321 56.897911 82.902101l373.634693-107.806569c59.401893-17.13874 46.442095-103.509195-15.463779-102.950874l-289.768221 2.554738a53.666421 53.666421 0 0 0-41.451051 20.048773z"
                  fill="#606060"
                  p-id="28704"
                />
                <path
                  d="M1004.384333 0H463.575015C208.659514 0 0.000002 205.563373 0.000002 456.807495s208.574918 456.807495 463.575013 456.807495H1004.384333c254.93242 0 463.575013-205.580291 463.575013-456.807495S1259.249077 0 1004.384333 0z m96.572488 532.942077H753.258642c-10.67576 0-19.304346-17.037228-19.304346-38.067291s8.628586-38.067291 19.304346-38.067291H1100.821471c10.67576 0 19.304346 17.054146 19.304346 38.067291S1111.564906 532.942077 1100.821471 532.942077z m-19.38894-190.319537H386.323792a38.067291 38.067291 0 1 1 0-76.134583h695.244089a38.067291 38.067291 0 1 1 0 76.134583z"
                  fill="#606060"
                  p-id="28705"
                />
              </svg>
              <span class="collectSpan">站务中心</span>
            </li>
            <li class="collectLi">
              <svg
                t="1597731918152"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="30873"
                width="20"
                height="20"
              >
                <path
                  d="M246.613333 615.509333v166.826667h94.976v-153.6zM778.922667 615.509333v166.826667H683.946667v-153.6z"
                  fill="#64EDAC"
                  p-id="30874"
                />
                <path
                  d="M511.488 170.496c-168.874667 0-350.549333 116.138667-350.549333 371.2v251.733333c0 18.858667 15.274667 34.133333 34.133333 34.133334H301.056c37.632 0 68.266667-30.634667 68.266667-68.266667V700.586667c0-69.973333-56.917333-126.976-126.976-126.976h-13.141334v-32c0-209.237333 141.824-302.933333 282.282667-302.933334s282.282667 93.696 282.282667 302.933334v32h-13.141334c-69.973333 0-126.976 56.917333-126.976 126.976v58.709333c0 37.632 30.634667 68.266667 68.266667 68.266667h105.984c18.858667 0 34.133333-15.274667 34.133333-34.133334V541.781333c0-255.061333-181.76-371.285333-350.549333-371.285333z m-210.517333 588.8zM242.346667 641.962667c32.341333 0 58.709333 26.282667 58.709333 58.709333l-0.085333 58.709333h-71.765334V641.962667h13.141334z m551.424 117.333333H721.92V700.586667c0-32.341333 26.282667-58.709333 58.709333-58.709334h13.141334v117.418667zM887.381333 776.789333c-0.768 0-1.365333-0.597333-1.365333-1.365333V625.92c0-0.768 0.597333-1.365333 1.365333-1.365333h1.365334c36.266667 0 65.621333 29.354667 65.621333 65.621333v19.626667c-0.085333 36.864-30.208 66.986667-66.986667 66.986666zM137.984 776.789333c-37.546667 0-68.266667-30.72-68.266667-68.266666V692.906667c0-37.546667 30.72-68.266667 68.266667-68.266667v152.149333z"
                  fill="#333C4F"
                  p-id="30875"
                />
              </svg>
              <span class="collectSpan">帮助中心</span>
            </li>
            <li class="collectLi">
              <svg
                t="1597731942842"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="31265"
                width="20"
                height="20"
              >
                <path
                  d="M511.965867 1011.165867C236.7488 1011.165867 12.834133 787.217067 12.834133 512S236.7488 12.834133 511.965867 12.834133C787.217067 12.834133 1011.165867 236.782933 1011.165867 512s-223.9488 499.165867-499.2 499.165867z m0-930.0992C274.397867 81.066667 81.1008 274.397867 81.1008 512s193.297067 430.933333 430.865067 430.933333c237.636267 0 430.933333-193.297067 430.933333-430.933333 0-237.602133-193.297067-430.933333-430.933333-430.933333z"
                  fill
                  p-id="31266"
                />
                <path
                  d="M564.0192 758.4768c-135.918933 0-246.545067-110.523733-246.545067-246.4768 0-135.918933 110.592-246.510933 246.545067-246.510933 33.314133 0 65.604267 6.519467 96.017067 19.387733l-26.658134 62.8736A178.4832 178.4832 0 0 0 385.774933 512a178.449067 178.449067 0 0 0 178.2784 178.210133c32.085333 0 63.488-8.6016 90.794667-24.8832l34.9184 58.6752a245.9648 245.9648 0 0 1-125.7472 34.474667z"
                  fill
                  p-id="31267"
                />
              </svg>
              <span class="collectSpan">版权服务中心</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from '../../components/Nav.vue'
export default {
  data() {
    return {
            imagePath5: require("../../assets/images/视频.png"),
            imagePath6: require("../../assets/images/文章.png"),
            imagePath7: require("../../assets/images/问题.png"),
            imagePath9: require("../../assets/images/想法.png"),
            imagePath0: require("../../assets/images/persons.jpg"),
            slidePicture: [
                "https://n1-q.mafengwo.net/s13/M00/03/30/wKgEaVyu94SAIqDcAAheevdYPB4887.png",
                "https://p1-q.mafengwo.net/s11/M00/AB/01/wKgBEFrrsvOACErGAAGJ4YrPQUs78.jpeg",
                "https://p1-q.mafengwo.net/s11/M00/4A/E0/wKgBEFrQBqeAYyjMAAURcw8MxG470.jpeg",
                "https://b1-q.mafengwo.net/s12/M00/D4/09/wKgED1vpIAiAI6D9AAZ72-z4yZw188.png",
                "https://n1-q.mafengwo.net/s10/M00/6F/B3/wKgBZ1h4nkiAURQzAAHf0nrnc6I29.jpeg"
            ],
            articleContent:[],
            mycolor:'white',
            concernContent:[],
            collectContent:[]
    };
  },
  components:{
    Nav
  },
  filters:{
      time:function(value){
         let pTime=[]
        for(let i=0;i<value.length;i++){
          if(value[i]!='T'){
            pTime.push(value[i])
          }else{
            break 
          }
        }
        let pTimes=pTime.join('')
        return pTimes
      }
  },
  methods: {
    toDetails(aId) {
      this.$store.state.aId = aId
      console.log(aId)
      this.$router.push("/index/details");
    },
    changeColor(aId){
      
      console.log(this.$refs.dom[aId].style.backgroundColor="rgb(248,248,248)")
    },
    changeColors(aId){
      this.$refs.dom[aId].style.backgroundColor="white"
    },
    goWrite(){
      this.$router.push('/index/write')
    }
  },
  created(){
    this.$axios.get('http://localhost:3000/articleContent/getAllUsers')
    .then(res=>{
      console.log(res.data)
      this.articleContent = res.data.data
      for(let i=0;i<this.articleContent.length;i++){
        if(this.articleContent[i].likeClick>100){
          this.articleContent[i].likeClick=100
        }
      }
    })
    .catch(err=>{
      console.log('err',err)
    })

    this.$axios.get('http://localhost:3000/articleContent/getConcern',{params:{uId:this.$store.state.ownUid}})
    .then(res=>{
      console.log('res',res)
      this.concernContent = res.data.data
    })
    .catch(err=>{
      console.log('err',err)
    })

    this.$axios.get("http://localhost:3000/articleContent/getCollects",{params:{uId:this.$store.state.ownUid}})
      .then(res=>{
      console.log('res',res)
      this.collectContent = res.data.data
    })
    .catch(err=>{
      console.log('err',err)
    })
  }
};
</script>
<style lang="scss" scope>
/deep/div .el-tabs{
  position: relative;
  top: 0!important;
}
*, *::before, *::after {
  box-sizing: inherit !important;
}
/deep/span .el-tag{
  text-align: center;
}
/deep/.el-tabs--border-card>.el-tabs__content{
  padding-top: 0;
}
.fontt{
    font-size: 1.17em;
    font-weight: bold;
}
#right>div /deep/ .el-carousel{
  height: 200px;
  overflow: hidden;
}
.personImg {
  width: 35px;
  height: 35px;
  border-radius: 50px;
  position: relative;
  top: 10px;
}
.el-carousel__container /deep/.el-carousel__arrow{
  outline:none;
}
.personName {
  font-size: 15px;
  font-family: 楷体;
  display:inline-block;
  overflow: hidden;
  margin-left: 10px;
  position: relative;
  top: 10px;
}
.el-progress__text {
  font-size: 8px !important;
}
.el-progress-circle {
  width: 50px !important;
  height: 50px !important;
  font-size: 8px !important;
}

.el-tabs__nav .el-tabs__item {
  font-size: 26px;
  height: 60px;
  line-height: 60px;
  font-family: 宋体;
}
li .el-tag {
  text-align: center;
}
.innerContent {
  width: 390px;
  height: 150px;
  margin-left: 10px;
  float: right;
  margin-top: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.5em;
  font-family: 楷体;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
.el-carousel__container {
  position: relative;
  height: 200px !important;
  margin-top: 10px;
}
.el-carousel__indicators--horizontal {
  bottom: 0;
  left: 40% !important;
  transform: translateX(-50%);
}

// .el-carousel {
//   position: relative;
// }

.el-carousel ul {
  position: relative;
  top: -20px;
  left: 220px !important;
}
body {
  background-color: rgb(246, 246, 246);
}
.buttons {
  margin-top: 8px;
}
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}

#navindex {
  width: 1200px;
  position: relative;
  left: 50%;
  margin-left: -600px;
  margin-top: 70px;
  margin-bottom: 20px;
}
.buttons {
  float: left;
  margin-right: 15px;
}
.icons {
  margin-left: 50px;
  margin-top: 10px;
  color: rgb(149, 149, 149);
}
.personShow {
  font-size: 10px;
  margin-left: 5px;
  position: relative;
  top: 8px;
}
#left {
  width: 740px;
  height: 100%;
  box-shadow: 0px 0px 3px #ddd;
  padding-right: 30px;
  float: left;
  margin-bottom: 20px;
  background-color: white;
}
#right {
  margin-left: 10px;
  width: 330px;
  box-shadow: 0px 0px 3px #ddd;
  float: left;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  /* background-color: white; */
  /* background-color: rgb(255, 243, 226); */
}

.images {
  width: 25px;
  height: 25px;
  overflow: hidden;
  padding-left: 2px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.ziti {
  font-size: 16px;
  position: relative;
  top: -6px;
  left: 3px;
  padding-left: 8px;
  font-family: 黑体;
}

.imagess {
  width: 200px;
  height: 80px;
  float: left;
}
.rightTitle {
  width: 340px;
  height: 100px;
  margin-top: 20px;
  /* background-color: white; */
  /* box-shadow: 1px 1px 1px #ccc; */
}
.rightImage {
  width: 35px;
  height: 35px;
  border: 1px solid transparent;
  border-radius: 50%;
  background-color: rgb(255, 243, 226);
}
.rightLi {
  width: 50px;
  float: left;
  padding-left: 30px;
  font-size: 13px;
  padding-top: 20px;
  /* background-color: white; */
}
.rightUse {
  width: 360px;
  height: 60px;
  /* background-color: white; */
}
.rightUseLi {
  width: 168px;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  margin-top: 5px;
  border: 1px solid #ccc;
  /* box-shadow: 1px 1px 1px #ccc; */
  float: left;
  text-align: center;
  /* background-color: white; */
}
.creation {
  width: 320px;
  height: 60px;
  margin-top: 15px;
  border: 1px solid #ccc;
  /* box-shadow: 1px 1px #ccc; */
  line-height: 70px;
  padding-left: 20px;
  font-size: 20px;
  font-family: 黑体;
}
.creations {
  font-size: 18px;
  padding-left: 80px;
  color: blue;
}
.extension {
  width: 340px;
  height: 150px;
  padding-left: 10px;
}
.extensionLi {
  width: 40px;
  float: left;
  padding-left: 35px;
  padding-right: 35px;
  font-size: 13px;
  padding-top: 20px;
}
.form {
  width: 700px;
  height: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.collect {
  width: 300px;
  height: 280px;
  margin-top: 20px;
}
.collectLi {
  padding: 5px;
  width: 300px;
  height: 30px;
  color: rgb(133, 144, 166);
}
.collectSpan {
  padding-left: 20px;
}
#transform {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  z-index: 10;
}
.advice {
  padding-top: 20px;
}
</style>

